<!--框架结构-->

<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    :style="{ overflow: 'auto', height: 'calc(100vh - 59px)', position: 'fixed', left: 0 , background: '#fff', top: '59px', padding:'20px 8px' }"
    width="250px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
    <!-- 侧边菜单 -->
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      @select="onSelect"
      @updateMenuTitle="onUpdateMenuTitle"
      :mode="mode"
      :style="smenuStyle">
    </s-menu>
<!--    <section class="content_left">-->
<!--      <div class="content_left_item m_hoverCP" :class="{ 'content_left_item_active': false }"-->
<!--           v-for="(item, index) in menus" :key="item.key" @click="onChangeMenu(item, index)">-->
<!--        <img src="@assets/img/img5.png" alt="" />-->
<!--        {{ item.meta.title }}-->
<!--      </div>-->
<!--    </section>-->
  </a-layout-sider>

</template>

<script>
  import ALayoutSider from 'ant-design-vue/es/layout/Sider'
  import Logo from '../tools/Logo'
  import SMenu from './index'
  import { mixin, mixinDevice } from '@/utils/mixin.js'

  export default {
    name: "SideMenu",
    components: { ALayoutSider, Logo, SMenu },
    mixins: [mixin, mixinDevice],
    props: {
      mode: {
        type: String,
        required: false,
        default: 'inline'
      },
      theme: {
        type: String,
        required: false,
        default: 'dark'
      },
      collapsible: {
        type: Boolean,
        required: false,
        default: false
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false
      },
      menus: {
        type: Array,
        required: true
      }
    },
    computed:{
      smenuStyle() {
        let style = { 'padding': '0' }
        if (this.fixSiderbar) {
          // style['height'] = 'calc(100% - 59px)'
          style['height'] = 'calc(100%)'
          style['overflow-y'] = 'auto'
          style['overflow-x'] = 'hidden'
        }
        return style
      }
    },
    methods: {
      // onChangeMenu(item, index){
      //   this.onSelect(item)
      //   this.onUpdateMenuTitle(item)
      // },
      onSelect (obj) {
        console.log("select",obj)
        this.$emit('menuSelect', obj)
      },
      onUpdateMenuTitle (obj) {
        console.log("onUpdateMenuTitle",obj)
        this.$emit('updateMenuTitle', obj)
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-menu-inline .ant-menu-item::after {
    border-right: none;
  }

  /deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: #F0FFF9;
  }

  /deep/ .ant-menu-item {
    padding: 0 16px !important;
  }

  /deep/ .ant-menu-item-selected{
    background-color: tan;
  }

  /deep/ .ant-menu-submenu-title{
    padding-left: 16px !important;
  }

  /deep/ .ant-menu-sub{
    //padding-left: 28px !important;
    padding-left: 24px !important;
  }


  //.content_left {
  //  box-sizing: border-box;
  //  padding: 24px 0;
  //  min-height: calc(100vh - 59px);
  //  background: #FFFFFF;
  //  overflow-y: auto;
  //
  //  .content_left_item {
  //    display: flex;
  //    align-items: center;
  //    margin: 0 auto 4px;
  //    padding: 7px 16px;
  //    background: #FFFFFF;
  //    border-radius: 4px;
  //    font-family: PingFang SC, PingFang SC;
  //    font-weight: 400;
  //    font-size: 14px;
  //    color: rgba(0, 0, 0, 0.6);
  //    line-break: anywhere;
  //
  //    img {
  //      margin-right: 8px;
  //      width: 20px;
  //      height: 20px;
  //    }
  //  }
  //
  //  .content_left_item:last-child {
  //    margin-bottom: 0;
  //  }
  //
  //  .content_left_item_active {
  //    background: #F0FFF9;
  //    color: #148958;
  //  }
  //}

  /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
  .sider {
    @scrollBarSize: 4px;

    ul.ant-menu {

      /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
      &::-webkit-scrollbar {
        width: @scrollBarSize;
        height: @scrollBarSize;
        background-color: transparent;
        display: none;
      }

      & .-o-scrollbar {
        display: none;
      }

      /* 兼容IE */
      -ms-overflow-style: none;
      -ms-scroll-chaining: chained;
      -ms-content-zooming: zoom;
      -ms-scroll-rails: none;
      -ms-content-zoom-limit-min: 100%;
      -ms-content-zoom-limit-max: 500%;
      -ms-scroll-snap-type: proximity;
      -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);

      /* 定义滚动条轨道 */
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      /* 定义滑块 */
      &::-webkit-scrollbar-thumb {
        border-radius: @scrollBarSize;
        background-color: #eee;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

        &:hover {
          background-color: #dddddd;
        }

        &:active {
          background-color: #bbbbbb;
        }
      }
    }

    /** 暗色系滚动条样式 */
    &.dark ul.ant-menu {
      &::-webkit-scrollbar-thumb {
        background-color: #666666;

        &:hover {
          background-color: #808080;
        }

        &:active {
          background-color: #999999;
        }
      }
    }

  }

  /* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
</style>

<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="less">
  // // 选中首页的时候不显示背景颜色，只应用于左侧菜单
  //.sider .ant-menu.ant-menu-root {
  //  & > .ant-menu-item:first-child {
  //    background-color: transparent;
  //
  //    & > a, & > a:hover {
  //      color: rgba(0, 0, 0, 0.65);
  //    }
  //
  //    &.ant-menu-item-selected {
  //      & > a, & > a:hover {
  //        color: @primary-color;
  //      }
  //    }
  //  }
  //
  //  &.ant-menu-dark > .ant-menu-item:first-child {
  //    & > a, & > a:hover {
  //      color: rgba(255, 255, 255, 0.65);
  //    }
  //
  //    &.ant-menu-item-selected {
  //      & > a, & > a:hover {
  //        color: rgba(255, 255, 255, 1);
  //      }
  //    }
  //  }
  //}
</style>
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
